<script setup>
import { ref } from 'vue';
import { ElInput, ElLink, ElMenu, ElMenuItem, ElContainer, ElHeader, ElAside, ElMain, ElFooter, ElRow, ElCol, ElCard, ElTabs, ElTabPane, ElEmpty } from 'element-plus';

const activeIndex = ref('1');
const activeTab = ref('articles');

import { useUserStore } from '@/stores/userStore';
import Weather from "../../components/Weather.vue";
const store = useUserStore();
const user = store.user;

const myArticleList = ref([
  {
    id: 1,
    title: "理解JavaScript闭包",
    date: "2023-01-15",
    desc: "深入探讨JavaScript中的闭包及其工作原理。"
  },
  {
    id: 2,
    title: "Vue 3组合式API入门",
    date: "2023-02-20",
    desc: "学习Vue 3中组合式API的基础知识及其有效使用方法。"
  },
  {
    id: 3,
    title: "使用Node.js构建可扩展应用",
    date: "2023-03-10",
    desc: "使用Node.js构建可扩展和可维护应用的最佳实践。"
  },
  {
    id: 4,
    title: "CSS网格布局：综合指南",
    date: "2023-04-05",
    desc: "深入指南，教你如何使用CSS网格布局创建复杂布局。"
  },
  {
    id: 5,
    title: "React Hooks完全指南",
    date: "2023-05-12",
    desc: "全面了解React Hooks及其在函数组件中的应用。"
  }
]);

const articleList = ref([]);
const courseList = ref([]);
const productList = ref([]);
</script>

<template>
  <el-container>
    <el-container>
      <el-aside width="200px">
        <el-card>
          <el-menu :default-active="activeIndex" style="border-bottom: none !important">
            <el-menu-item index="1">个人主页</el-menu-item>
            <el-menu-item index="2">个人资料</el-menu-item>
            <el-menu-item index="3">账号设置</el-menu-item>
            <el-menu-item index="4">消息设置</el-menu-item>
            <el-menu-item index="5" v-show="user.userType === 'admin'">后台管理</el-menu-item>
          </el-menu>
        </el-card>
      </el-aside>

      <el-main>
        <el-card>
          <el-row>
            <el-col :span="6">
              <img src="../../../public/images/avatar.png" alt="头像">
            </el-col>
            <el-col :span="12">
              <h2>{{ user.username }}</h2>
              <span>性别: {{ user.gender }}|</span>
              <span>岗位: {{ user.job }}</span>
              <p><span>签名档: 代码千万行，注释第一行;开发不规范,同事两行泪。</span></p>
            </el-col>
            <el-col :span="6">
            <weather></weather>
            </el-col>
          </el-row>
        </el-card>

        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="我发布的文章" name="articles">
              <div v-if="myArticleList.length > 0">
                <div
                  class="article-item"
                  v-for="article in myArticleList"
                  :key="article.id"
                >
                  <a href="#" class="article-title">{{ article.title }}</a>
                  <span class="article-date">{{ article.date }}</span> |
                  <span class="article-desc">{{ article.desc }}</span>
                </div>
              </div>
              <el-empty v-else description="暂无数据"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="我收藏的文章" name="favorites">
              <el-empty v-if="!articleList.length" description="暂无数据" />
              <div v-else>列表数据</div>
            </el-tab-pane>
            <el-tab-pane label="我收藏的课程" name="courses">
              <el-empty v-if="!courseList.length" description="暂无数据" />
              <div v-else>列表数据</div>
            </el-tab-pane>
            <el-tab-pane label="我收藏的商品" name="products">
              <el-empty v-if="!productList.length" description="暂无数据" />
              <div v-else>列表数据</div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>

    
  </el-container>
</template>


<style scoped>
.article-item {
  border-bottom: 1px solid #e8e8e8;
  padding: 15px 0;
}

.article-title {
  color: #1989fa;
  text-decoration: none;
  display: block;
}

.article-date {
  color: #666;
  margin-right: 10px;
}

.article-desc {
  color: #999;
  display: block;
  margin-top: 5px;
}

.article-item + .article-item {
  border-top: 1px solid #ccc;
}

/* 隐藏-xs-only 类在 Vue 3 中需配合媒体查询实现，此处仅为示例 */
.hidden-xs-only {
  @media (max-width: 767px) {
    display: none !important;
  }
}
</style>